// px转换为rem
@function pxToRem($px, $base: 750px) {
    $min: 1 / $base * 10 * 1;
    $result: $px / $base * 10 * 1;

    @if $result < 0.027 and $result > 0 {
        @return 2px;
    }

    @else {
        @return $px / $base * 10 * 1rem;
    }

}
// 设置dpr下的字体大小
@mixin font-dpr($font-size, $line-height: $font-size) {
    font-size: $font-size / 2;

    [data-dpr="2"] & {
        font-size: $font-size;

    }

    [data-dpr="3"] & {
        font-size: $font-size * 3 / 2;
    }
}
/******* TextField *******/

.yuko-textfield {
    position: relative;
    width: pxToRem(624px);
    height: pxToRem(80px);
    line-height: pxToRem(80px);
    margin-bottom: pxToRem(22px);
    user-select: none;
    -webkit-user-select: none;

    .yuko-textfield_bg {
        display: block;
        width: pxToRem(60px);
        height: pxToRem(80px);
        //background: url(../images/pollex.png) no-repeat center center;
        //background-size: 37%;
        text-align: center;
        @include font-dpr(24px,80px);
        color: #ff0000;
        float: left;
    }
    
    .yuko-textfield_input {
        color: #999999;
        @include font-dpr(24px);
        border: none;
        outline: none;
        background-color: #f8f8f8;
        width: pxToRem(312px);
        height: 100%;
        padding: 0 pxToRem(62px) 0 pxToRem(26px);
        position: absolute;
        right: 0;
        color: #000000;
    }

    .yuko-textfield_label {
        color: #58595b;
        @include font-dpr(28px);
        height: 100%;
    }

    .yuko-textfield_textbtn {
        color: #cba200;
        @include font-dpr(24px);
        position: absolute;
        right: pxToRem(26px);
    }

    .yuko-textfield_searchbtn {
        position: absolute;
        content: "";
        top: pxToRem(20px);
        right: pxToRem(20px);
        width: pxToRem(40px);
        height: pxToRem(40px);
        background: url(../images/search.png) no-repeat center center;
        background-size: contain;
    }

    .yuko-list_items {
        position: absolute;
        background-color: #f8f8f8;
        width: pxToRem(400px);
        top: 100%;
        right: 0;
        z-index: 99;
        max-height: pxToRem(328px);
        overflow: scroll;
        
        &.yuko-list_hide {
            display: none;
        }
        
        div {
            position: relative;
            color: #999999;
            padding: 0 pxToRem(32px);
            height: pxToRem(80px);
            line-height: pxToRem(80px);
            border: 1px solid transparent;
            border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent;
            cursor: pointer;
            overflow: hidden;
        }
    }
    @media (device-width:320px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/5 */
        .yuko-textfield_textbtn {
            right: 0;
            p{
                transform: scale(0.75);
            }
        }
    }
}
/******* TextField *******/

/******* Select *******/

.yuko-select {
    position: relative;
    width: pxToRem(400px);
    height: pxToRem(80px);
    font-family: Arial;
    @include font-dpr(26px);
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    -webkit-user-select: none;
    
    .yuko-select_selected {
        position: relative;
        background-color: #f8f8f8;
        color: #999999;
        padding: 0 pxToRem(32px);
        border: 1px solid transparent;
        border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent;
        cursor: pointer;
        overflow: hidden;
    }

    .yuko-select_items {
        position: absolute;
        background-color: #f8f8f8;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        max-height: pxToRem(328px);
        overflow: scroll;
        border: pxToRem(2px) solid #aeaeae;
        border-top: none;
    }

    .yuko-select_hide {
        display: none;
    }

    .yuko-select_items div, .yuko-select_selected {
        position: relative;
        color: #999999;
        padding: 0 pxToRem(32px);
        height: pxToRem(80px);
        line-height: pxToRem(80px);
        border: 1px solid transparent;
        border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent;
        cursor: pointer;
        overflow: hidden;
    }

    .yuko-select_selected:after {
        position: absolute;
        content: "";
        top: pxToRem(16px);
        right: pxToRem(20px);
        width: pxToRem(40px);
        height: pxToRem(40px);
        background: url(../images/arrow_down.png) no-repeat center center;
        background-size: contain;
    }

    .yuko-select_selected.yuko-select_arrow-active:after {
        background: url(../images/arrow_up.png) no-repeat center center;
        background-size: contain;
    }

    .yuko-select_selected.yuko-select_arrow-active{
        border: pxToRem(2px) solid #aeaeae;
        border-bottom: none;
    }

}

/******* Select *******/

/******* Radio *******/

.yuko-radio {
    position: relative;
    @include font-dpr(32px);
    line-height: 24px;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: 0;
    padding-left: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    
    .yuko-radio_input {
        position: absolute;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        -ms-appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        border: none;
    }

    &.is-checked .yuko-radio_outer-circle {
        border: 2px solid #cba200;
    }

    .yuko-radio_outer-circle {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        margin: 0;
        cursor: pointer;
        border: 2px solid #cba200;
        border-radius: 50%;
        z-index: 2;
    }

    &.is-checked .yuko-radio_inner-circle {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    .yuko-radio_inner-circle {
        position: absolute;
        z-index: 1;
        margin: 0;
        top: 5px;
        left: 5px;
        // top: pxToRem(10px);
        // left: pxToRem(10px);
        box-sizing: border-box;
        width: 10px;
        height: 10px;
        // width: pxToRem(20px);
        // height: pxToRem(20px);
        cursor: pointer;
        transition-duration: .28s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-property: transform;
        transition-property: transform, -webkit-transform;
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        border-radius: 50%;
        background: #ffcc00;
    }
}


/******* Radio *******/

/******* Button *******/

.yuko-button {
    position: relative;
    text-align: center;
    color: white;
}

.yuko-imgbtn_bg {
    width: 100%;
    height: 100%;

    .yuko-imgbtn_bg.bg-1 {
        width: pxToRem(580px);
        height: pxToRem(110px);
        line-height: pxToRem(100px);
        color: #58595b;
        @include font-dpr(48px);
        background: url(../images/btn1.png) no-repeat center center;
        background-size: contain;
    }
    
    .yuko-imgbtn_bg.bg-2 {
        width: pxToRem(160px);
        height: pxToRem(65px);
        line-height: pxToRem(61px);
        color: #000000;
        @include font-dpr(26px);
        background: url(../images/btn2.png) no-repeat center center;
        background-size: contain;
    }
}
/******* Button *******/